<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- 搜索 -->
        <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />

        <van-cell-group v-for="item in ss">
            <van-cell :title="item.goods_name" value="内容" />

        </van-cell-group>


        <div class="box">

            <h4>搜索历史</h4>

            <p>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
            </p>
            <p>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
            </p>
        </div>

          <div class="box">

            <h4>热门搜索</h4>

            <p>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
            </p>
            <p>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
                <span>电视</span>
            </p>
        </div>

    </div>
</template>

<script setup>

import { useRouter } from 'vue-router';
let routerApi = useRouter()
let onClickLeft = () => {
    routerApi.push('/')
}


import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';


let value = ref('')
let ss = ref([])

watch(value, (val => {
    qsearchApi(val).then(res => {
        console.log(res);
        ss.value = res.data.message;
    })
}))

</script>

<style lang="scss" scoped>
.box {
    h4{
        margin-left: 20px;
        color: #ccc;
    }
    p {
        span {
            margin-left: 30px;
            margin-top: 5px;
            border-radius: 5px;
            background-color: #ccc;
            color: white;
        }
    }

}
</style>